define(function(require, exports, module) {
	var $ = require('bigfoot/common');
	
	
	function getStepWidth(){
		if(!this.stepWidth){
			this.stepWidth = this.mover.parentNode.clientWidth; // 获取容器宽度作为 item 宽度
		}
		
		return this.stepWidth;
	}

	var scrollTab = {
	    init : function(len){
	    
	    	if(!len){
	    		len = this.mover.getChildren().length;
	    	}
	    	this.len = len;
	    	
	    	getStepWidth.call(this);

			// 登记按钮事件
			this.tabHeader && this.tabHeader.onClk(this.onTabHeaderPress.bind(this));
			
			this.mover.style.width = this.isUsePx ? (this.stepWidth * len) +'px' : len + '00%';
			
			// 分配  tab 宽度
			var tabWidth = this.isUsePx ? this.stepWidth + 'px' : (1 / len * 100).toFixed(5) + '%';
			this.tabWidth = tabWidth;
			var children = this.mover.getChildren();
			this.children = children;
			
			for(var child, i = 0, j = children.length; i < j; i++){
				child = children[i];
				child.style.width = tabWidth;
			}
			if(this.isEnableTouch){
				var self = this;
				seajs.use('bigfoot/widget/tab/scrollTab_touch', function(_touch){
					_touch.init(self);
				});
			}
			
			/**
		     *  登记 resize 事件，以便 resize 容器的时候调整大小。
		     */
			
			// 使用 isUsePx = true 的好处是不用登记 resize 事件
			this.isUsePx && window.addEventListener('resize', function(){
				this.mover.style.width = this.isUsePx ? (this.stepWidth * len) +'px' : len + '00%';
				this.stepWidth = this.mover.parentNode.clientWidth; // 获取容器宽度作为 item 宽度
				
				var children = this.mover.getChildren();
				var stepWidth = this.stepWidth + 'px';
				for(var i = 0, j = children.length; i < j; i++){
					children[i].style.width = stepWidth;
				}
				
				this.autoHeight();
			}.bind(this));
		},
		
		// 是否支持手势（左右切换）
		isEnableTouch:false,
		tabHeader : null,
	    mover : null,
	    
		onTabHeaderPress : function(e){
			var target = e.target,
			li = target.tagName == 'LI' ? target : target.up('li');
		
			if(!li)return;
			$.pressedStatable(li);
			
			// 获取 index
			var arr = this.tabHeader.getChildren();
			for(var i = 0, j = arr.length; i < j; i++){
				if(li == arr[i])break;
			}

			// todo 结合 库
			if(~li.className.indexOf('id_')){
				var id = li.className.match(/id_(\d+)/).pop();
				window.location.hash = '#id=' + id;
			}

			// 移动！
			this.go(i);
			this.currentIndex = i;
			
			var nextItem = this.mover.getChildren()[i]; // 下一个 item
			this.onItemSwitch && this.onItemSwitch.call(this, nextItem, target, i);
			
			this.autoHeight(nextItem);
		},
		go : window.navigator.isWebkit ? function(i){
			var leftValue =  this.isUsePx ? ('-' + (i * this.stepWidth) + 'px') : ('-' + (1 / this.len * 100  * i).toFixed(2) + '%');
			this.mover.style.webkitTransition = '-webkit-transform 400ms linear';
			this.mover.style.webkitTransform  = 'translate3d({0}, 0px, 0px)'.format(leftValue);
		} : function(i){
			// 移动！
			this.mover.style.left = this.isUsePx ? ('-' + (i * this.stepWidth) + 'px') : ('-' + i + '00%');
		},
		// 根据内容调整高度
		autoHeight : function(tab){
			var height = (tab || this).scrollHeight;
			height += 30;
			this.mover.parentNode.style.height = height + 'px';
		},
		// 改方法应该在 init() 执行之后才执行
		perloading: function(){
			// 首先从页面获取加载中元素 ，如果没有，则使用默认的
			var loadingIndicator = document.querySelector('.loadingIndicatorTpl');
			if(loadingIndicator){
				loadingIndicator = loadingIndicator.value;
			}else{
				loadingIndicator = default_loadingIndicator;
			}
		
			var frag = document.createDocumentFragment();
			var tabWidth = String((1 / this.len * 100)) + '%'; 
			for(var i = 0; i < this.len; i++){
				var div = document.createElement('div');
				div.style.width = tabWidth;
				div.innerHTML = loadingIndicator;
				frag.appendChild(div);
			}
			this.mover.appendChild(frag);
		},
		getCurrentTab:function(){
			return this.mover.getChildren()[this.currentIndex];
		}

	}
	var default_loadingIndicator = '<div style="text-align:center;padding:40px;line-height:18px;">\
		<img alt="" src="" /> \
		加载中……</div>';
	
	exports.scrollTab = scrollTab;

	var loopController = {
		init: function(){
			 scrollTab.init.apply(this, arguments);

			this.autoLoop && window.setInterval(this.goNext.bind(this), this.autoLoop);
		},
        // 跳到指定的那一帧 @param {Number} i
        go : function(i, isDirectShow){
            if(isNaN(i))throw '异常';

            this.currentIndex = i; // @type {Number} 当前索引
            
            scrollTab.go.call(this, i);
            // var el = this.el;
            // if(isDirectShow)el.style.display = 'none';
            
            // Fx.slideX(this.mover, - this.containerWidth * i);

            // isDirectShow && setTimeout(function(){
            //      Fx.fadeIn(el);
            //     // style.display = 'block';
            // }, 500);

            // All AFTER Events
            this.onItemSwitch && this.onItemSwitch.call(this, i);// @event 切换事件.@param {Number} i 当前项之索引

            this.isBOF = this.currentIndex == 0;               // 设置一个标记，该标记用作表示是否到了最始端。@param {Boolean} isEOF
            this.isBOF && this.firstFrame  && this.firstFrame(this.currentIndex);
            this.isEOF = (this.currentIndex + 1)  == this.len; // 设置一个标记，该标记用作表示是否到了最始端。@param {Boolean} isBOF
            this.isEOF && this.onLastFrame && this.onLastFrame(this.currentIndex);
        },

        // 跳到前一帧。
        goPrevious : function(){
            this.currentIndex--;
            if (this.currentIndex < 0)this.currentIndex = this.len - 1;
            this.go(this.currentIndex); 
        },
        
        /**
         * 跳到下一帧。
         */
        goNext : function(){
            this.currentIndex++;
            if (this.currentIndex == this.len)this.currentIndex = 0; // 循环
            
            this.go(this.currentIndex);
        },

        // 当前在第几帧数
        currentIndex : 0,

        // 一开始的时候， this.isBof = true
        isBOF : true, isEOF : false,
        autoLoop : 4000 
	};
	exports.loopController = loopController;
});